#page{
    width: 100%;
    margin: 0 auto;
}

#header{
    width: 100%;
    height:50px;
    background-color: #eab936;
    border: 0px solid #000;
    position: fixed;
    left: 0;
    top: 0;
    margin-bottom:16px;
    overflow: hidden;
    z-index: 100;



}

#content{
    height:100%;
    margin-top: 60px;
    margin-bottom:16px;
    border: 1px solid #000;
    z-index: 1;
}

#homeContent{
    height:80vh;
    margin-top: 60px;
    margin-left: 10%;
    margin-bottom:16px;
    border: none;
    overflow: scroll;
    z-index: 1;
}

#leftBar{
    height:100%;
    margin-bottom:16px;
    width: 10%;

    position: fixed;
    margin-left: 0;
    top:50px;
    border: 1px #eab936 solid;
    background-color: lightgray;
}

#footer{
    width: 100%;
    height:10%;
    border: 1px solid #000;
}
#homeFooter{
    position: fixed;
    right:0;
    bottom:0;
    width:90%;
    height: 10%;
}

#top-bar-logo{

    height: 100%;
}

html, body { margin: 0; 
             padding: 0;
             width: 100%; 
             height: 100%; }

#loginDiv { overflow:hidden; 
            margin-right: auto; 
            margin-left: auto; 
            width: 50%; 
            margin-top: auto; 
            margin-bottom: auto; 
            height: 50%; }

#logoBox{ overflow:hidden; 
          margin-top: -125px;
          margin-left: -156px;
          width: 100%; 
          height: 100%;
          background:url(img/biglogo.png) no-repeat center center;
          background-size: auto 100%; }

#logoBoxImage{height: 100%; 
              margin-right: auto; 
              margin-left: auto; 
              margin-top: auto; 
              margin-bottom: auto;}

#loginBox{height: 50%;
          width: 100%;
          text-align: center;
}

#topleftbar{
    width: 60%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
}          
#searchBoxDiv{
    right: 0;
    position: absolute;
    top:0;
    width: 33%;
    height:100%;
}          
#searchBoxCenterer{
    margin:auto;
    width:100%;
    height:30%;
    position: absolute;
    top:30%;
}    
#userBar{
    position: absolute;
    right: 0;
    top:0;
    height: 100%;
    display: block;
} 

#userPhotoBar{
    height:100%;
    display:block;
    float:left;

}

.searchinput{
    border:0; 
    width: 80%;
}         
.searchbutton{
    border:0 !important;
    background-color: #eab936 !important;
    height: 100%;
    background:url(img/search.png) no-repeat center center;
    background-size: auto 100%;
    margin-left: 2px;
}


.userBarLogoutButton{
    border: 0;
    background-color: #eab936;
    height: 100%;
    display: block;
    float:right;
    
    vertical-align: middle;
    text-decoration: none;
    line-height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}     

.ButtonNotificationsForm{
    border: 0;
    background-color: #eab936;
    height: 50px;
    display: block;
    float: left;
        margin-right: 5px;

}

.ButtonNotifications .ui-button {
        background-color: #eab936;
       
      
        height: 50px;
        display: block;
        position: auto;
            margin-right: 5px;

}
.ButtonNotifications .ui-icon { 
    background: url(http://localhost:8080/MeteoCal/faces/javax.faces.resource/img/notifications.png) 50% 50% / 80% no-repeat no-repeat;
    height:50px;
    left:0;
    margin:0 !important;
    position:absolute;
    top:0 !important;
    width:40px;
}
.ButtonNotifications .ui-button .ui-button-text{
        background-color: #eab936;
        height: 50px;
        display: block;
}

ul.ui-menu {
    width: 400px !important;
}

.count {
    position: absolute;
    display: block;
    background:#ff0000;
    min-width:14px;
    color:#ffffff;
    border-radius: 50%;
    padding: 2px;
    text-align: center;
    font-size: 12px;
    z-index: 10;
}

.invite {
    background-size: 40px,40px;
    background-image: url(img/inviteNot.png) !important;
    height: 50px;
    width: 50px;
}

.admin {
    background-size: 40px,40px;
    background-image: url(img/adminNot.png) !important;
    height: 50px;
    width: 50px; 
}

.changed {
    background-size: 40px,40px;
    background-image: url(img/changedNot.png) !important;
    height: 50px;
    width: 50px; 
}

.responseYes {
    background-size: 40px,40px;
    background-image: url(img/yesNot.png) !important;
    height: 50px;
    width: 50px;     
}

.responseNo {
    background-size: 40px,40px;
    background-image: url(img/noNot.png) !important;
    height: 50px;
    width: 50px;     
}

.notificationRAIN {
    background-size: 40px,40px;
    background-image: url(img/rainNot.png) !important;
    height: 50px;
    width: 50px; 
}

.notificationCLEAR {
    background-size: 40px,40px;
    background-image: url(img/clearNot.png) !important;
    height: 50px;
    width: 50px;     
}

.notificationSNOW {
    background-size: 40px,40px;
    background-image: url(img/snowNot.png) !important;
    height: 50px;
    width: 50px;     
}

.notificationCLOUD {
    background-size: 40px,40px;
    background-image: url(img/cloudNot.png) !important;
    height: 50px;
    width: 50px; 
}



#userBarNameButton{
    border: 0;
    background-color: #eab936;
    height: 100%;
    display: block;
    float: left;
    color: black;
    margin-left: 5px;
    
    vertical-align: middle;
    text-decoration: none;
    line-height: 50px;

}   
#logoutForm{
    height: 100%;
    display: block;
    float: left;
    border: 0;
    background-color: #eab936;
}   
#centerLogin{
    margin:auto; 
}          
.scheduleHome{
    height: 100%;
}       

.ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
    border: none;
}          

.ui-widget{
    font-size: 90% !important;
}
.centered{
    margin: auto;
}

.CLEAR{
    background: url(img/sunny.png) no-repeat center center;
    background-size: auto 100%;
    background-position: bottom right;
}
.CLOUD{
    background: url(img/cloud.png) no-repeat center center;
    background-size: auto 100%;
    background-position: bottom right;
}

.RAIN{
    background: url(img/rain.png) no-repeat center center;
    background-size: auto 100%;
    background-position: bottom right;
}

.SNOW {
    background: url(img/snow.png) no-repeat center center;
    background-size: auto 100%;
    background-position: bottom right;    
}

.red{
    background-color: red !important;
}
.green{
    background-color: green !important;
}

.aqua{
    background-color: aqua !important;
        color: black !important;

}

.blue{
    background-color: blue !important;
}

.yellow{
    background-color: yellow !important;
    color: black !important;
}
.sienna{
    background-color: sienna !important;
}

.violet{
    background-color: violet !important;
}
.purple{
    background-color: purple !important;
}

.grey {
    background-color: gray !important;
}

.old{
    opacity: 0.5;
}

.colorbox{
    height: 10px;
    width: 10px;
    margin-left: 5px;
    display: box;
    float: right;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}
.ui-menu {
   height: 300px;
   overflow: scroll;
}

.participantlist .ui-datalist-content{
    height: 150px !important; 
    overflow: scroll;
}

.agendaButton{
    margin-bottom: 3px;
    margin-right:0px;
    margin-left: auto;
}
